<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>autofocus fields</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/test.style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/script.js"></script>
<style>
</style>
</head>
<body>

<form action="html5.autofocus.htm" methof="get">
<input type="text" id="gomi" title="最初のテキストフィールドにフォーカスがあるのは当たり前なので" />
<input type="text" id="q" placeholder="ここにフォーカスが欲しい" autofocus />
<input type="text" id="q2" placeholder="IE6,7はこの書き方なら拾う？" autofocus="autofocus" />
<input type="text" id="gomi2" title="最後のinput type=text" />
</form>

<div id="log"></div>

<p>メモ</p>
<ul>
<li><a href="http://diveintohtml5.org/forms.html#autofocus">Autofocus Fields</a></li>
<li>[autofocus]だけを使用すると（実際サンプルの多くはソレだけだ）最後に出現するautofocusに行ってしまう。回避のために、.eq(0)をつけた。</li>
<li>[autofocus]に :first を併用すると IE9がうまく拾わない</li>
<li>@TODO IE6,7では、autofocus="autofocus"と記述しないとセレクタにマッチしない（？）要確認</li>
</ul>

<script type="text/javascript">
<!-- 
$(function() {

	// autofocus イベントを回避するテスト
	// IE9 は期待どおりどこにもフォーカスされない。
	// Firefox (5)は最初のautofocusにfocusしてしまう。
	// Opera,Safari,Chromeは最後のautofocusにfocusする
	// $("input").each(function(){
	// 	$(this).removeAttr("autofocus");
	// });

	// このセレクタは、Firefox,Safari,Chrome,Opera IE9で拾う
	// もちろん、これらのブラウザはこれがなくても動作するので必要ない
	// が、複数個sutofocusが指定されていた場合に、最後のやつを拾ってしまう。
	$("[autofocus]")
		.eq(0)			// 最初の一つ（:firstを併用するとIE9でも動かない？）
	//	.each(function(){ alert("OK") })	// 動作確認
		.focus();		// ターゲットを補足

});
// -->
</script>

</body>
</html>
